<template>
  <!-- 画圆形 -->
  <div class="form">
    <div class="inputBox">
      <label for="">x</label>
      <input type="text" v-model="cx" />
    </div>
    <div class="inputBox">
      <label for="">y</label>
      <input type="text" v-model="cy" />
    </div>
    <div class="inputBox">
      <label for="">r</label>
      <input type="text" v-model="r" />
    </div>
    <div class="inputBox">
      <label for="">fill</label>
      <input type="color" name="" id="" v-model="fill" />
    </div>
    <div class="inputBox">
      <label for="">strokeColor</label>
      <input type="color" name="" id="" v-model="stroke" />
    </div>
    <div class="inputBox">
      <label for="">strokeWidth</label>
      <input type="text" name="" v-model="strokeWidth" />
    </div>
    <div class="inputBox">
      <button @click="addCircle">addCircle</button>
    </div>
  </div>
</template>
<script>
import { reactive, toRaw, toRefs } from "vue";
import * as d3 from "d3";
import { circleDrawAdd } from "../../util/geoDrawAdd.js";
export default {
  setup() {
    const circle = reactive({
      cx: 111,
      cy: 111,
      r: 11,
      fill: "#000",
      stroke: "#000",
      strokeWidth: 4,
    });

    function addCircle() {
      const geo = {};
      Object.assign(geo, toRaw(circle));
      circleDrawAdd(geo);
    }

    return { ...toRefs(circle), addCircle };
  },
};
</script>